<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-07-22 11:04:00
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-08-10 11:27:35
 * @Description: 应用详情
 -->
<template>
  <a-modal
    :visible="visible"
    @cancel="handleCancel"
    @before-ok="handleBeforeOk"
  >
    <template #title>
      {{ title }}
    </template>
    <a-form :model="form">
      <a-form-item field="clientName" label="客户端名称">
        <a-input v-model="form.clientName" />
      </a-form-item>
      <a-form-item field="webServerRedirectUri" label="回调地址">
        <a-input v-model="form.webServerRedirectUri" />
      </a-form-item>
      <a-form-item v-if="type == 'add'" field="clientId" label="初始化">
        <a-switch v-model="initValue" />
      </a-form-item>
      <a-form-item v-if="type == 'edit'" field="clientId" label="公钥">
        <a-input v-model="form.clientId" />
      </a-form-item>
      <a-form-item v-if="type == 'edit'" field="clientSecret" label="应用私钥">
        <a-input v-model="form.clientSecret" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, reactive, ref } from 'vue';

  const initValue = ref(false);
  const form = reactive({
    clientName: '',
    webServerRedirectUri: '',
    clientSecret: '',
    clientId: '',
  });
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: '',
    },
    data: {
      type: Object,
    },
  });
  const emit = defineEmits(['update:visible']);

  const title = computed(() => {
    switch (props.type) {
      case 'add':
        return '新增';
      case 'view':
        return '查看';
      default:
        return '编辑';
    }
  });
  const handleBeforeOk = () => {
    // nothing to do here
  };
  const handleCancel = () => {
    emit('update:visible', false);
  };
</script>

<style lang="less" scoped></style>
